<template>
	<view class="order-meal">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :share="false"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->
		
		<!-- 套餐 -->
		<view class="details">
			<!-- <view class="tit clearfix">
				<image src="/static/images/nav_icon_store@2x.png" class="fl" mode="widthFix"></image>
				<text class="fl">新天地保洁服务</text>
				<image src="/static/images/middle_icon_next@2x.png" class="fl arr" mode="widthFix"></image>
			</view>
			<view class="cont clearfix">
				<image src="/static/images/baby.png" mode="widthFix" class="fl" ></image>
				<view class="fl">
					<view class="name">李阿姨</view>
					<view>室内清洁、物品整理、除尘除垢</view>
				</view>
				<view class="fr price">¥188</view>
			</view> -->
			<view class="address" @click="open_adds">
				<view class="title">服务地址</view>
				<view class="cont clearfix">
					<view class="fl">
						<view class="name">{{addAct.contactsName}}</view>
						<view class="phone">{{addAct.contactsPhone}}</view>
						<view class="add">{{addAct.province}}{{addAct.city}}{{addAct.region}}{{addAct.address}}</view>
					</view>
					<image src="/static/images/r-arrow.png" class="fr" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="time-pick">
				<view class="title uni-input clearfix">
					<view class="fl">上门时间</view>
					<image src="/static/images/r-arrow.png" mode="widthFix" class="fr"></image>
					<BiaofunDatetimePicker class="fr" placeholder="请选择日期时间" start="2000-01-01" end="2100-01-01" fields="minute" @change="changeDatetimePicker"></BiaofunDatetimePicker>
				</view>
			</view>
			
			<view class="title clearfix"  @click="toSelect()">
			<!-- <view class="title clearfix"  @click="open_saff"> -->
				请选择服务员工
				<image src="/static/images/r-arrow.png" mode="widthFix" class="fr"></image>
				<text class="fr" v-if="saffAct">{{saffAct.name||'-'}}</text>
			</view>
			<view class="requirement">
				<view>备注：</view>
				<input type="text" value="" placeholder="请输入" v-model="remarks"/>
			</view>
		</view>
		<!-- 地址弹框 -->
		<uni-popup ref="popup_adds" type="center">
			<view class="public-tick">
				<!-- 头部 -->
				<view class="padd_32 header clearfix">
					<view class="fl"><image class="fl" src="/static/images/back.png" mode="widthFix" @click="close_adds"></image></view>
					地址选择
				</view>
				<view class="hei_100"></view>
				<!-- end -->
		
				<!-- 地址列表 -->
				<scroll-view scroll-y class="adds_list">
					<view class="list padd_32">
						<view class="list clearfix" v-for="(item, index) in address" :class="addAct.id == item.id ? 'act' : ''" :key="item.index" @click="adds_act(index)">
							<!-- <view class="fl">
								<view class="dot bg_5EBEFF"></view>
								<view>默认地址</view>
							</view> -->
							<view class="fr">
								<view class="name clearfix">
									{{item.contactsName}}
									<!-- <text class="delete fr" :data-id='item.id' @click="del_add">删除</text>
									<text class="edit fr" :data-id='item.id' @click="chang_add">编辑</text> -->
								</view>
								<view class="phone">{{item.contactsPhone}}</view>
								<view>{{item.province}}{{item.city}}{{item.region}}{{item.address}}</view>
							</view>
						</view>
					</view>					
				</scroll-view>
				<!-- end -->
		
				<!-- 按钮 -->
				<!-- <navigator url="/pages/personal/address/add"><view class="btn"><view>添加新地址</view></view></navigator> -->
				
				<!-- end -->
			</view>
		</uni-popup>
		<!-- 员工弹框 -->
		<uni-popup ref="popup_saff" type="center">
			<view class="public-tick">
				<!-- 头部 -->
				<view class="padd_32 header clearfix">
					<view class="fl"><image class="fl" src="/static/images/back.png" mode="widthFix" @click="close_saff"></image></view>
					员工选择
				</view>
				<view class="hei_100"></view>
				<!-- end -->
		
				<!-- 员工列表 -->
				<scroll-view scroll-y class="adds_list">
					<view class="list clearfix padd_32">
						<view class="list_saff fl" v-for="(item, index) in employees" :class="saffAct.id == item.id ? 'act' : ''" :key="item.index" @click="saff_act(index)">
							<image :src="item.portrait" mode="aspectFill" class="fl"></image>
							<view class="fl">
								<view class="name">{{item.name}}</view>
								<uni-rate active-color="#FCC800" max="5" is-fill="false" size="11" disabled="true" :value="item.score"></uni-rate>
								<view>{{item.age}}岁</view>
								<view>{{item.nativePlace}}人</view>
							</view>
						</view>
					</view>					
				</scroll-view>
				<!-- end -->
		
				<!-- 按钮 -->
				<!-- <navigator url="/pages/personal/address/add"><view class="btn"><view>添加新地址</view></view></navigator> -->
				
				<!-- end -->
			</view>
		</uni-popup>
		
		<!-- end -->
		
		<!-- 按钮 -->
		<view class="btn" @click="pay()">确认下单</view>
		<!-- end -->
	</view>
</template>

<script>
import BiaofunDatetimePicker from '@/pageageA/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
import PublicHeader from '@/components/PublicHeader.vue';
import { mapState, mapMutations } from 'vuex';
	export default {
	computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader,
			BiaofunDatetimePicker
		},
		data() {
			return {
				title:'套餐订单',
				detail: '',
				time: '',
				remarks: '',
				employees: [],
				saffAct:{
					name: '',
					id: ''
				},
				address: [],
				addAct:{
					address: '',
					city: '',
					contactsName: '',
					contactsPhone: '',
					createDatetime: '',
					id: '',
					province: '',
					region: '',
					userId: '',
				},
				info:{
					enterpriseId: '',
					name: '',
					id: '',
					userId: '',
				},
			}
		},
		onLoad(option) {
			let _this = this
			this.detail = JSON.parse(option.query);
			_this.$http
				.get('/personal/center/getaddresslist/' + this.uerInfo.userId)
				.then(function(response) {
					_this.address = response.data;
					if (_this.address.length) {
						_this.addAct = _this.address[0]
					}
				})
				.catch(function(error) {
					console.log(error);
				});
			// _this.$http.post('/emp/info/query', {
			// 	userId: _this.uerInfo.userId,
			// 	enterpriseId: _this.detail.shopId,
			// 	page: 1,
			// 	size: 99999,
			// 	status: ''
			// }).
			// then(function(response) {
			// 	if (response.success) {
			// 		_this.employees = response.data.list||[]
			// 		_this.saffAct = _this.employees[0]
			// 		_this.showAct.name = _this.entBizs.business.name
			// 		_this.showAct.bue = _this.entBizs.univalenceUnit
			// 		_this.showAct.pri = _this.entBizs.univalence
			// 		_this.showAct.id = _this.entBizs.businessId
			// 	}
			// }).catch(function(error) {
			// 	console.log(error);
			// });
		},
		onShow() {
			let _this = this
			uni.getStorage({
			    key: 'orderMeal',
			    success: function (res) {
					for (let i in _this.info) {
						_this.info[i] = res.data[i]
					}
					_this.saffAct.name = _this.info.name
					_this.saffAct.id = _this.info.id 
			    },
				fail: function (res) {
					console.log(res)
				}
			});
		},
		methods: {
			toSelect() {
				let _this = this
				uni.getStorage({
				    key: 'orderMeal',
				    success: function (res) {
						let query = res.data
						query.enterpriseId = _this.detail.shopId
						query.userId = _this.uerInfo.userId
						console.log(query)
						uni.setStorage({ //将订单信息保存在本地
							key: 'orderMeal',
							data: query
						})
						uni.navigateTo({
						    url: '/pageageA/pages/order/select'
						});
				    }
				});
			},
			open_saff() {
				var _this = this;
				_this.$refs.popup_saff.open();
			},
			close_saff(){
				this.$refs.popup_saff.close();
			},
			open_adds() {
				var _this = this;
				if (_this.address.length) {
					_this.$refs.popup_adds.open();
				} else {
					_this.$http
					.get('/personal/center/getaddresslist/' + this.uerInfo.userId)
					.then(function(response) {
						_this.address = response.data;
						if (_this.address.length) {
							_this.addAct = _this.address[0]
							_this.$refs.popup_adds.open();
						} else {
							uni.navigateTo({
								url: '/pageageA/pages/address/add'
							})
						}
					})
					.catch(function(error) {
						console.log(error);
					})
				}
				
			},
			close_adds(){
				this.$refs.popup_adds.close();
			},
			adds_act(index){
				var _this = this;
				_this.addAct = _this.address[index]
				this.$refs.popup_adds.close();
			},
			saff_act(index){
				var _this = this;
				_this.saffAct = _this.employees[index]
				this.$refs.popup_saff.close();
			},
			changeDatetimePicker(date) {
				this.time = date.fmt3 + ":00";
			},
			pay() {
				var _this = this
				if (_this.address=='') {
					uni.showToast({
					    title: '请选择服务地址',
					    duration: 1000,
						icon: 'none'
					})
					return
				}
				if (_this.time=='') {
					uni.showToast({
					    title: '请选择上门时间',
					    duration: 1000,
						icon: 'none'
					})
					return
				}
				if (_this.saffAct.id=='') {
					uni.showToast({
					    title: '请选择员工',
					    duration: 1000,
						icon: 'none'
					})
					return
				}
				_this.$http
					.post('/order/createorder',{
						typeId:2,
						businessId:_this.detail.businessId,
						enterpriseId: _this.detail.shopId,
						packageItemId: _this.detail.id,
						packageId: _this.detail.packageId,
						employeeId:_this.saffAct.id,
						userId:_this.uerInfo.userId,
						contactsPhone:_this.addAct.contactsPhone,
						contactsName:_this.addAct.contactsName,
						province:_this.addAct.province,
						city:_this.addAct.city,
						region:_this.addAct.region,
						address:_this.addAct.address,
						appointmentDatetime:_this.time,
						comments:_this.remarks,
						amount:1,
						price: _this.detail.price||0,
						univalence:_this.detail.univalence||'',
						client:'MP-WEIXIN',
						univalenceUnit: _this.detail.univalence||''
					})
					.then(function(response) {
						if(response.success){
							uni.switchTab({
								url: '/pages/order/index'
							})
						} else {
							let title = '订单创建失败'
							if (response.msg) {
								title = response.msg
							}
							if (response.data&&response.data.length>0&&response.data[0].defaultMessage) {
								title = response.data[0].defaultMessage
							}
							uni.showToast({
								title: title,
								duration: 1000,
								icon: 'none'
							})
							return
						}
					})
					.catch(function(error) {
						console.log(error);
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.details{
		width: 91.48%;
		margin-left: 4.26%;
	}
.details .tit{
		font-size: 30rpx;
		color: #333;
		margin-top: 30rpx;
	}
	.details .tit image{
		width: 30rpx;
		margin-top: 8rpx;
		margin-right: 16rpx;
	}
	.details .tit .arr{
		width: 14rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}
	.details .cont{
		font-size: 24rpx;
		color: #999;
		padding: 22rpx 0;
		margin-bottom: 46rpx;
	}
	.details .cont image{
		width: 110rpx;
		border-radius: 10rpx;
	}
	.details .cont .name{
		font-size: 26rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.details .cont .price{
		margin-top: 40rpx;
	}
	.public-tick {
		height: 100%;
		width: 100%;
		background-color: #f9fafb;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.discount{
		margin-bottom: 46rpx;
	}
	.discount view{
		height: 80rpx;
		line-height: 80rpx;
		color: #999;
		font-size: 26rpx;
	}
	.discount image{
		width: 14rpx;
		margin-top: 28rpx;
		margin-left: 10rpx;
	}
	.discount text{
		color: #333;
	}
	.pay{
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
	}
	.pay .fr{
		color: $uni-color1;
	}
	.requirement{
		border-bottom: 1rpx solid #DFDFDF;
	}
	.btn{
		width: 686rpx;
		height: 100rpx;
		background-color: $uni-color1;
		box-shadow:0 6rpx 20rpx 0 $uni-color1;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		font-size: 36rpx;
		line-height: 100rpx;
		margin: 0 auto;
		margin-top: 14rpx;
	}
	.address{
		width: 100%;
		min-height: 200rpx;
	}
	.address .title {
		border: 0 none;
		height: 70rpx;
		line-height: 70rpx;
	}
	.address .cont {
		font-size: 26rpx;
		color: #333;
	}
	.address .cont view {
		margin-bottom: 10rpx;
		width: 648rpx;
	}
	.address .cont .phone {
		color: #666;
	}
	.address .cont .add {
		color: #999;
		font-size: 24rpx;
	}
	.address .cont image {
		width: 16rpx;
		margin-top: 40rpx;
	}
	.title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1rpx solid #d0d0d0;
		margin-top: 16rpx;
	}
	.title text {
		font-size: 26rpx;
	}
	.title image {
		width: 16rpx;
		margin-top: 38rpx;
		margin-left: 10rpx;
	}
	.title .down {
		width: 30rpx;
	}
	.title input{
		border: 1rpx solid #999;
		height: 40rpx;
		line-height: 40rpx;
		width: 80rpx;
		padding: 4rpx;
		padding-left: 10rpx;
		margin-top: 26rpx;
		margin-right: 10rpx;
		font-size: 26rpx;
	}
	.requirement {
		border-bottom: 1rpx solid #dfdfdf;
	}
	.requirement view {
		color: #333;
		font-size: 32rpx;
		line-height: 100rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #dfdfdf;
	}
	.requirement input {
		height: 136rpx;
	}
	
	.public-tick {
		height: 100%;
		width: 100%;
		background-color: #f9fafb;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	/* 导航 */
	.public-tick .header {
		height: 100rpx;
		width: 100%;
		background: #fff;
		line-height: 95rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
		text-align: center;
	}
	.public-tick .header image {
		margin-top: 26rpx;
		width: 38rpx;
		position: absolute;
	}
	.public-tick .header .fr image {
		position: absolute;
		right: 32rpx;
	}
	.public-tick .header .fl text {
		margin-left: 14rpx;
	}
	.public-tick .header .tab {
		margin-left: 120rpx;
	}
	.public-tick .header .tab text {
		text-align: center;
		display: inline-block;
		font-size: 32rpx;
		color: #666;
		position: relative;
	}
	.public-tick .header .tab .tit {
		margin-right: 90rpx;
	}
	.public-tick .header .tab .tit:last-child {
		margin-right: 0;
	}
	.public-tick .header .tab .cur_sp {
		position: absolute;
	}
	.public-tick .header .tab .cur {
		font-weight: 500;
		color: #333;
	}
	.public-tick .header .tab .cur .cur_sp {
		width: 30rpx;
		height: 4rpx;
		background: $uni-color1;
		border-radius: 2rpx;
		right: 17rpx;
		bottom: 0;
	}
	.public-tick .list .clearfix {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	.public-tick .list .clearfix .fl:first-child {
		width: 258rpx;
		text-align: center;
		color: $uni-color1;
		font-size: 44rpx;
		text-align: center;
		line-height: 160rpx;
		height: 160rpx;
		margin-top: 20rpx;
		border-right: 1rpx dashed #bbbbbb;
		margin-right: 40rpx;
	}
	.public-tick .list .clearfix .fl:first-child text {
		font-size: 74rpx;
	}
	.public-tick .list .clearfix .fl .title {
		color: #333333;
		font-size: 26rpx;
		margin-top: 30rpx;
		line-height: 37rpx;
		margin-bottom: 4rpx;
		border-bottom: 0 none;
		height: 37rpx;
	}
	.public-tick .list .clearfix .fl .time {
		font-size: 24rpx;
		color: #999;
		line-height: 33rpx;
		margin-bottom: 28rpx;
	}
	.public-tick .list .clearfix .fl .state {
		min-width: 104rpx;
		height: 38rpx;
		line-height: 38rpx;
		text-align: center;
		border-radius: 6rpx;
		background: linear-gradient(270deg, #98d7ff 0%, #e782e9 100%);
		color: #fff;
		font-size: 26rpx;
	}
	.public-tick .btn {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-top: 1rpx solid #dfdfdf;
		position: fixed;
		bottom: 0;
		margin-bottom: 0;
		box-shadow: 0 0 0 0;
	}
	.public-tick .btn view {
		width: 686rpx;
		height: 100rpx;
		background-color: $uni-color1;
		box-shadow: 0 6rpx 20rpx 0 $uni-color1;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		font-size: 36rpx;
		line-height: 100rpx;
		margin: 0 auto;
		margin-top: 14rpx;
	}
	.adds_list{
		overflow: auto;
		height: 88%;
	}
	.adds_list .list {
		padding: 20rpx 32rpx;
		/* border-bottom: 1rpx solid #dfdfdf; */
		box-sizing: border-box;
	}
	.adds_list .list .fl view {
		font-size: 22rpx;
		color: #999;
		line-height: 30rpx;
		width: 48rpx;
	}
	.adds_list .list .fl .dot {
		width: 34rpx;
		height: 34rpx;
		border-radius: 100%;
		border: 1rpx solid #d6d6d6;
		margin-top: 16rpx;
		margin-bottom: 6rpx;
		margin-left: 4rpx;
	}
	.adds_list .list .fr {
		width: 624rpx;
		font-size: 26rpx;
		color: #999999;
		line-height: 37rpx;
	}
	.adds_list .list .fr .name {
		color: #333;
		font-size: 26rpx;
		margin-bottom: 6rpx;
		height: auto;
	}
	.adds_list .list .fr .name .fr {
		width: auto;
		margin-left: 58rpx;
	}
	.adds_list .list .fr .name .edit {
		color: $uni-color1;
	}
	.adds_list .list .fr .name .delete {
		color: #ff7272;
	}
	.adds_list .list .fr .phone {
		color: #666;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}
	.adds_list .bg_5EBEFF {
		background-color: #5ebeff;
		border: 0 none !important;
	}
	.adds_list .add {
		width: 686rpx;
		height: 100rpx;
		text-align: center;
		color: #fff;
		line-height: 100rpx;
		border-radius: 10rpx;
		box-shadow: 0px 6px 20px 0px $uni-color1;
		background-color: $uni-color1;
		font-size: 36rpx;
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		margin-left: -343rpx;
	}
	.list_saff{
		width: 335rpx;
		height: 169rpx;
		margin-right: 6rpx;
		margin-bottom: 20rpx;
	}
	.list_saff image{
		width: 128rpx;
		height: 155rpx;
		margin: 0 24rpx;
	}
	.list_saff .fl{
		font-size: 24rpx;
		color: #999;
	}
	.list .list_saff .fl view{
		width: 140rpx;
		margin: 6rpx 0;
	}
	.list .list_saff .fl .name{
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 40rpx;
		font-weight: 500;
		margin: 10rpx 0;
	}
	.act {
		border: 1rpx solid $uni-color1;
		box-sizing: border-box;
	}
</style>
